<template>
    <div>
        <div style="display: flex; justify-content: flex-end">
            <el-button
                icon="el-icon-caret-left"
                size="mini"
                type="primary"
                plain
                style="font-size: 20px"
                :disabled="leftDisable"
                @click="pre()"
            ></el-button>
            <el-button
                icon="el-icon-caret-right"
                size="mini"
                type="primary"
                plain
                style="font-size: 20px"
                :disabled="rightDisable"
                @click="next()"
            ></el-button>
        </div>
        <div id="echarFive" ref="echarFive"></div>
    </div>
</template>
<script>
export default {
    name: "echarFive",
    mounted() {
        this.initCharts();
    },
    data() {
        return {
            leftDisable: true, //左边按钮开启
            rightDisable: true, //右边按钮开启
            isNext: false, //是否选择下一组数据
            isPrev: false, //是否选择上一组数据
        };
    },
    props: [],
    methods: {
        initCharts() {
            let that = this;
            let echarFive = that.$echarts.init(that.$refs.echarFive);
            // console.log("图表里");
            // console.log(echarFive);
            let cageXData = [
                "3排1行23列",
                "3排2行23列",
                "3排1行25列",
                "14排1行28列",
                "4排1行23列",
                "5排1行23列",
                "3排3行23列",
                "6排1行23列",
                "2排1行25列",
                "1排1行5列",
            ];
            let cageYData = [18, 18, 16, 15, 14, 10, 9, 9, 8, 8];
            let option = {
                xAxis: {
                    type: "category",
                    data: cageXData,
                    axisLabel: {
                        interval: 0, //强制文字产生间隔
                        rotate: 25, //文字逆时针旋转35°
                        textStyle: {
                            //文字样式
                            color: "black",
                            fontSize: 10,
                        },
                    },
                },
                yAxis: {
                    name: '天数/天',
                    type: "value"
                    
                },
                title: {
                    text: "鸽笼产蛋周期排行：",
                    show: "true",
                    textStyle: {
                        fontWight: "normal",
                    },
                    left: "center",
                },
                tooltip: {
                    trigger: "item",
                    triggerOn: "mousemove", //什么事件可以触发提示框
                    formatter: "{b}里鸽子产蛋周期为{c}天",
                },
                series: [
                    {
                        type: "bar",
                        data: cageYData,
                        color: "#5dadff",
                        // borderWidth: 5,
                    },
                ],
            };

            echarFive.setOption(option);
        },
    },
};
</script>
<style lang="scss" scoped>
#echarFive {
    width: 580px;
    height: 450px;
}
</style>